import * as echarts from 'echarts';
import { useEffect, useRef } from 'react';

export default function Chart2() {
  const chartRef = useRef<HTMLDivElement>(null);
  const chartInstance = useRef<echarts.ECharts | null>(null);

  useEffect(() => {
    if (chartRef.current) {
      // 初始化图表
      chartInstance.current = echarts.init(chartRef.current);

      // 生成模拟数据
      const generateData = () => {
        const data = [];
        let baseValue = 200;
        const hours = 24;
        const pointsPerHour = 6; // 每10分钟一个点

        for (let hour = 0; hour < hours; hour++) {
          for (let point = 0; point < pointsPerHour; point++) {
            const minute = point * 10;
            const time = `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;

            // 添加随机波动
            const randomFluctuation = Math.random() * 80 - 60;
            // 添加时间趋势
            const timeTrend = Math.sin((hour / 24) * Math.PI * 2) * 80;
            // 添加短期波动
            const shortTermNoise =
              Math.sin(
                ((hour * pointsPerHour + point) / (pointsPerHour * 2)) *
                  Math.PI,
              ) * 20;

            let value =
              baseValue + randomFluctuation + timeTrend + shortTermNoise;
            value = Math.max(0, Math.min(400, Math.round(value)));

            data.push([time, value]);
          }
        }
        return data;
      };

      const data = generateData();

      // 配置项
      const option = {
        grid: {
          top: 20,
          right: 20,
          bottom: 20,
          left: 40,
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            label: {
              backgroundColor: '#6a7985',
            },
          },
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: data.map((item) => item[0]),
          axisLine: {
            lineStyle: {
              color: '#999',
            },
          },
          axisLabel: {
            color: '#999',
            interval: 23, // 每4小时显示一个刻度
            formatter: (value: string) => {
              const [hour] = value.split(':');
              return `${hour}:00`;
            },
          },
        },
        yAxis: {
          type: 'value',
          min: 0,
          max: 400,
          splitLine: {
            lineStyle: {
              color: '#f0f0f0',
            },
          },
          axisLine: {
            lineStyle: {
              color: '#999',
            },
          },
          axisLabel: {
            color: '#999',
          },
        },
        series: [
          {
            data: data.map((item) => item[1]),
            type: 'line',
            smooth: true,
            symbol: 'none',
            lineStyle: {
              width: 2,
              color: '#ffd666', // 黄色
            },
          },
        ],
      };

      // 设置配置项
      chartInstance.current.setOption(option);

      // 监听窗口大小变化
      const handleResize = () => {
        chartInstance.current?.resize();
      };
      window.addEventListener('resize', handleResize);

      return () => {
        window.removeEventListener('resize', handleResize);
        chartInstance.current?.dispose();
      };
    }
  }, []);

  return (
    <div
      ref={chartRef}
      style={{
        width: '100%',
        height: '30vh',
      }}
    />
  );
}
